<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绑定样式</title>
    <!--引入Vue-->
    <script type="text/javascript" src="./js/vue.js"></script>
</head>

<body>



    <div id="root">

        <input type="text" placeholder="Enter" v-model="ipt">
        <ul>
            <li v-for="(item,index) in newARR" :key="index">
                {{item.name}}--{{item.age}}
            </li>
        </ul>
        <button @click="sortli=1">升序排列</button>
        <button @click="sortli=2">将序排列</button>
        <button @click="sortli=0">原序排列</button>
    </div>

    <script>
        // const vm = new Vue({
        //     el: "#root",
        //     data: {
        //         ipt: "",
        //         lists: [{
        //             id: "01",
        //             name: "马冬梅",
        //             age: '18'
        //         }, {
        //             id: "02",
        //             name: "周冬雨",
        //             age: '30'
        //         }, {
        //             id: "03",
        //             name: "周杰伦",
        //             age: '40'
        //         }],
        //         // //空的新数组
        //         newARR: []
        //     },

        //     //用watch实现
        //     ////#region 
        //     watch: {
        //         // 当value为空时说明是空字符串， 那给个item中都默认有一个控制符串， 所以全部过滤都新新数组中
        //         ipt: {
        //             //初始化
        //             immediate: true, //页面加载初始化时让hander调用一下（可以不加）
        //             handler(value) {
        //                 //思路通过数组过滤出新的数组，然后绑定遍历出来

        //                 this.newARR = this.lists.filter(function(currentValue) {
        //                     console.log(this)
        //                         //indexof():该方法可以检索一个字符串中含有该内容，返回其第一次出现的索引,如果没有找到指定的内容，返回-1
        //                     return currentValue.name.indexOf(value) !== -1
        //                 })


        //             }
        //         }

        //     },
        // })
        // console.log(vm)

        //用计算属性实现
        const vm = new Vue({
            el: "#root",

            data: {
                ipt: "",
                lists: [{
                    id: "01",
                    name: "马冬梅",
                    age: '18'
                }, {
                    id: "02",
                    name: "周冬雨",
                    age: '80'
                }, {
                    id: "03",
                    name: "周杰伦",
                    age: '25'
                }],

                sortli: "", //0原顺序 ,1降序,2,升序

            },


            //用计算属性实现
            computed: {
                newARR() {
                    //console.log(this)
                    const _this = this // vm
                    const newArr = this.lists.filter(function(currentValue) {
                        console.log(_this) //window
                        return currentValue.name.indexOf(_this.ipt) !== -1

                    })

                    //sort() 如果需要升序排序，返回a-b
                    //如果需要降序排列。则返回B-a 
                    console.log(this.sortli)
                    switch (this.sortli) {
                        case 1:
                            newArr.sort(function(a, b) {
                                return a.age - b.age
                            })
                            break;
                        case 2:
                            newArr.sort(function(a, b) {
                                return b.age - a.age
                            })
                            break;
                        default:
                            newArr
                    }

                    return newArr
                },


            }

        })
    </script>
    <style>

    </style>
</body>

</html>